.wysiwyg-content{

    // Headings ============================================================
    h1{
        font-size: 2.7rem;
        font-family: $font-alright; font-weight: $bold-weight;
        color: $color-parse-blue;
        letter-spacing: -0.04rem;
        margin: 0.6em 0;
        line-height: 1.1;
//        font-weight: 400;
    }

    h2{
        font-family: $font-din;
        font-weight: $regular-weight;
        font-size: 2rem;
        color: $color-dolphin;
        margin: 0.5em 0;
        line-height: 1.2;
    }

    h3,
    h4,
    h5,
    h6{
        font-family: $font-din;
        font-weight: $regular-weight;
        font-size: 1.1rem;
        letter-spacing: 0.2rem;
        text-transform: uppercase;
        margin: 1em 0;
        color: $color-dolphin;

        & + h1{
            margin-top: 0;
        }
    }

    @include break-min($break-switch-fonts){
        h1{
            font-size: 4rem;
            letter-spacing: -0.05rem;
            margin: 0.28em 0;
        }
        h2{
            font-size: 2.6rem;
        }
        h3,
        h4,
        h5,
        h6{
            font-size: 1.2rem;
            letter-spacing: 0.225rem;
        }
    }

    // Paragraphs ==========================================================
    %para_styling{
        font-size: 1.4rem;
        color: $color-dolphin;
        margin: 1.2em auto;
        line-height: 1.7;

        a{
            color: $color-parse-blue;
            font-weight:700;

            code{
                color:$color-parse-blue;
                // word-wrap: break-word;
            }
        }

        @include break-min($break-switch-fonts){
            font-size: 1.6rem;
        }
    }

    p{
        @extend %para_styling;

        &:empty{  display:none; }
        &:not(:empty){
            & + h2,
            & + h3,
            & + h4,
            & + h5,
            & + h6{
                margin-top: 2em;
            }
        }
    }

    a:not(.btn){
        font-weight:700; color:$color-parse-blue;
        code{ font-weight:700; color:$color-parse-blue; }
    }

    // Paragraphs and Lists ================================================
    ul, ol{
        @extend %para_styling;

        padding:0;
        margin: 2em 0 2em 1em;
        list-style:none;

        li{
            margin: 0.9em 0;
            padding: 0 0 0 25px;
            line-height: 1.4;

            &:before{
                display:inline-block;
                float: left;
                content: "";
                left: 0; top:3px;
                width: 15px; height: 11px;
                background: url($svg-plus) left top no-repeat;
                background-size: 9px auto;
                margin-left: -30px;
                margin-right: 15px;
            }
        }

        @include break-min($break-switch-fonts){
            max-width: 480px;

            li{
                padding-left: 30px;
                &:before{
                    background-size: 11px auto;
                    top: 4px;
                }
            }
        }
    }
    ol{
        counter-reset: new-ol-counter;

        li{
            &:before{
                top: 2px;
                color: $color-parse-blue;
                font-family: $font-din;
                font-size: 1.2rem;
                background:none;
                content: counter(new-ol-counter);
                counter-increment: new-ol-counter;
            }
        }

        @include break-min($break-switch-fonts){
            li{
                &:before{
                    top: 2px;
                    font-size: 1.4rem;
                }
            }
        }
    }

    // Misc. ===============================================================
    hr{
        background-color: $color-mischka;
        display: block;
        width: 268px;
        height: 1px;
        margin: 4em auto;
        border: none;
        outline: none;

        @include break-min($break-switch-fonts){
            margin: 6em auto;
        }
    }

    p code,
    ul code,
    ol code{
        color: $color-martinique;
        background: $color-vista-white;
        border: 1px solid $color-mischka;
        padding: 0.1rem 0.2rem;
        font-family: $font-stack-code;
        font-weight: $regular-weight;
        font-size: 1.4rem;
        border-radius: 0.2rem;
        letter-spacing: -1px;
        word-wrap: break-word;

        a{
            color: $color-parse-blue;
            font-weight:700;
        }

        @include break-min($break-switch-fonts){
            border-radius: 0.3rem;
            font-size: 1.6rem;
            padding: 0.1rem 0.3rem;
        }
    }

    pre{
        $prism-pre-padding-left: 58px;


        font-family: $font-stack-code;
        background-color: #F0F0F0 !important;
        color: #66637A;
        font-size: 1.3rem;
        border-radius: 4px;
        word-wrap: normal;
        margin: 2em (20px * -1) !important;
        padding: 15px;
        overflow: auto;

        &.line-numbers{
            padding-left: $prism-pre-padding-left;

            &:before{
                content: "";
                position: absolute;
                left:0; top:0;
                background: #F0EDEE;
                width: 40px; height: 100%;
            }

            &, & .line-numbers-rows span:before{
                line-height: 1.75;
            }
        }

        code{
            color: $color-dolphin;
            font-family: $font-stack-code;

            .token.comment,
            .token.prolog,
            .token.doctype,
            .token.cdata{
                opacity: 0.4;
            }
        }

        .line-numbers-rows{
            border-right: none;
            top: -3px;
            left: ($prism-pre-padding-left * -1);

            span:before{
                opacity: 0.5;
                text-align: center;
                padding-right: 0;
            }
        }

        &.pre--dark{
            background-color: $color-thunder !important;
            color: white;

            &, code{
                text-shadow: 0 1px black;
            }

            &.line-numbers{
                &:before{
                    background: #292529;
                }
            }

            code{
                .token.comment,
                .token.prolog,
                .token.doctype,
                .token.cdata{
                    opacity: 0.75;
                }
            }

            .line-numbers-rows{
                span:before{
                    opacity: 1;
                }
            }
        }

        @include break-min($break-tablet){
            margin: 3.5em 0 !important;
        }
    }

    // Blockquote ==========================================================
    blockquote {
        color: $color-shuttle-gray;
        border-left: 2px solid $color-mischka;
        margin: 1.9em 0;
        position: relative;
        background: url(/assets/images/alright-quotes.png) no-repeat 20px 15px;
        background-size: 28px auto;
        padding: 2.5rem 0 2.4rem 2rem;

        @include break-min( 880px ) {
            background-position: 35px 20px;
            padding-left: 3.5rem;
            margin-left: -15%;
            width: 130%;
            // max-width: 875px;
        }

        @include break-min( 1024px ){
            margin-left: -25%;
            width: 150%;
        }

        &:before, &:after {
            content: "";
            border-radius: 50%;
            position: absolute;
        }

        &:before {
            top: -4px;
            left: -4px;
            width: 6px;
            height: 6px;
            background: $color-mischka;
        }
        &:after {
            bottom: -6px;
            left: -8px;
            border: 2px solid $color-mischka;
            width: 10px;
            height: 10px;
        }

        p {

            padding-top: 2.5rem;
            margin: 0 auto;
            font-size: 2rem;
            line-height: 1.3;
            letter-spacing: -0.03rem;

            @include break-min( $break-switch-fonts ) {
                font-size: 3rem;
                letter-spacing: -0.047rem;
                padding-top: 3.5rem;
            }
        }

        cite {
            display: block;
            margin-top: 1rem;
            color: $color-parse-blue;
            font-size: 1.6rem;
            font-weight: $bold-weight;
            font-style: normal;
            line-height: normal;

            @include break-min( $break-switch-fonts ) {
                font-size: 1.8rem;
            }

            span {
                color: $color-comet;
                display: block;
                font-size: 1rem;
                line-height: 1;
                font-weight: $regular-weight;
                text-transform: uppercase;
                letter-spacing: 0.1rem;

                @include break-min( $break-switch-fonts ) {
                    // font-size: 14px;
                }
            }
        }
    }

    // Images ==================================================================
    img {
        height: auto;
        border-radius: 4px;
        // border:1px solid $color-bright-gray;
    }

    figure {
        margin-top: 60px;
        margin-bottom: 60px;
        width: 100% !important;

        img{
            display:block;
            margin: 0 auto;
        }

        figcaption {
            font-size: 14px;
            color: $color-dolphin;
            text-align: center;
            padding: 10px 0;
            margin: 0 auto;
            max-width: 270px;
        }

        @include break-min( 880px ){
            margin-left: -15%;
            width: 130% !important;

            figcaption{
                max-width: 600px;
            }
        }

        @include break-min( 1024px ){
            margin-left: -25%;
            width: 150% !important;
            // max-width: 875px !important;
        }
    }


    // Tables ==================================================================
    .docs_table{
        $docs-table-uniform-padding-v: 12px;
        $docs-table-uniform-padding-h: 15px;

        text-align: left;
        overflow:auto;
        font-family: $font-stack-code;
        border-radius: 4px;
        border: 1px solid $color-mischka;
        margin: 1.5em auto 3em;
        font-size: 1.2rem;

        thead{
            background-color: $color-parse-blue;
            tr{
                th{
                    padding: $docs-table-uniform-padding-v $docs-table-uniform-padding-h;
                    font-family: $font-alright;
                    font-weight: $regular-weight;
                    color: white;

                    &:nth-child(even){
                        background-color: #1494e1;
                    }

                    & + th{
                        border-left: 1px solid darken($color-parse-blue, 5%);
                    }
                }
            }
        }
        tbody{
            tr{
                td{
                    padding: $docs-table-uniform-padding-v $docs-table-uniform-padding-h;

                    &:nth-child(even){
                        background-color: $color-vista-white;
                    }
                    &:first-child{
                        color: $color-martinique;
                    }
                    &:last-child{
                        font-family: $font-alright;
                        line-height: 1.4;
                    }

                    & + td{
                        border-left: 1px solid $color-mischka;
                    }
                }

                &:nth-child(even){
                    background-color: $color-selago;

                    td{
                        &:nth-child(even){
                            background-color: rgba($color-parse-blue,0.015);
                        }
                    }
                }

                & + tr{
                    border-top: 1px solid $color-mischka;
                }
            }
        }

        @include break-min($break-tablet){
          font-size: 1.4rem;
        };
    }

// .parse-wysiwyg
}
